<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	<script src="js/vue.js"></script>
	<style>
		/* 合并单元格 */
		table {
			border-collapse: collapse;
			position: absolute;
			top: 320px;
		}

		/* 为列名加边框 */
		th,
		td {
			border: 1px solid black;
			padding: 10px;
		}

		/* 实现隔行变色(白色和黄色）的表格显示效果 */
		/* 偶数行白色 */
		.even-row {
			background-color: white;
		}

		/* 奇数行黄色 */
		.odd-row {
			background-color: yellow;
		}

		.info {
			border: 2px red solid;
			width: 400px;
			text-align: center;
		}

		.add {
			position: absolute;
			left: 150px;
			top: 250px;
		}

		.inquire {
			position: absolute;
			left: 150px;
			top: 280px;
		}
	</style>
</head>

<body>
	<div id="app"></div>
	<template id="root">
		<div class="info">
			<h1>学生信息添加</h1>
			<!-- required 属性是 HTML 表单元素中常用的一个属性，它用于指定表单元素是否必须填写才能提交表单 -->
			学号：<input type="text" v-model="info.sno" required /> <span v-if="show">学号不能为空</span><br>
			姓名：<input type="text" v-model="info.name" required /><span v-if="show">姓名不能为空</span><br>
			性别：<input type="radio" value="男" v-model="info.sex" />男
			<input type="radio" value="女" v-model="info.sex" />女 <br>
			语文：<input type="text" v-model="info.chinese" /><br>
			数学：<input type="text" v-model="info.math" /><br>
			英语：<input type="text" v-model="info.english" />
		</div>
		<button @click="add" class="add">添加</button>
		<table>
			<!-- 制作表头即为第一行单元格名称（列名） -->
			<thead>
				<tr>
					<th>序号</th>
					<th>学号</th>
					<th>姓名</th>
					<th>性别</th>
					<th>语文</th>
					<th>数学</th>
					<th>英语</th>
					<th>总分</th>
					<th>平均分</th>
					<th>操作</th>
				</tr>
			</thead>
			<!-- 制作数据部分 -->
			<tbody>
				<!-- 读行数 -->
				<!-- even-row,odd-row要加引号否则无法识别index%2==0判断是奇数偶数-->
				<!-- v-bind绑定标签属性的值缩写为冒号，用三元表达式来确定真假值（0，1）结构(condition) ? value1 : value2，condition 为待判断的条件表达式，如果 condition 为真，则表达式结果为 value1，否则表达式结果为 value2 -->
				<tr v-for="(item,index) in student" :class="index%2==0?'even-row':'odd-row'" :key="item">
					<td>{{index}}</td>
					<td>{{item.sno}}</td>
					<td>{{item.name}}</td>
					<td>{{item.sex}}</td>
					<td>{{item.chinese}}</td>
					<td>{{item.math}}</td>
					<td>{{item.english}}</td>
					<td>{{sum(item)}}</td>
					<td>{{average(item)}}</td>
					<td><a href="#" @:click="update(index)">修改</a>|<a @click="del(index)" href="#">删除</a></td>
				</tr>
			</tbody>
		</table>
		<!-- 查询 -->
		<div class="inquire">
			<button @click="inquire(info.sno)">查询：</button><input type="text" v-model="info.sno" placeholder="请输入学号:" />
		</div>
	</template>
</body>
<script>
	const app = Vue.createApp({
		template: "#root",
		data() {
			return {
				student: [{
					sno: '189000101',
					name: '刘备',
					sex: '男',
					chinese: 124,
					math: 102,
					english: 90
				},
				{
					sno: '189000102',
					name: '关羽',
					sex: '男',
					chinese: 115,
					math: 98,
					english: 95
				},
				{
					sno: '189000103',
					name: '张飞',
					sex: '男',
					chinese: 130,
					math: 86,
					english: 68
				},
				{
					sno: '189000104',
					name: '诸葛亮',
					sex: '男',
					chinese: 125,
					math: 145,
					english: 130
				},
				{
					sno: '189000105',
					name: '赵云',
					sex: '男',
					chinese: 118,
					math: 132,
					english: 100
				},
				{
					sno: '学号',
					name: '姓名',
					sex: '男',
					chinese: 100,
					math: 100,
					english: 100
				},

				],
				info: {
					sno: '',
					name: '',
					sex: '女',
					chinese: '',
					math: '',
					english: ''
				},
				show: false
			}
		},
		methods: {
			// 求和函数用item接受item的数据
			sum(item) {
				// parseFloat用于将字符串转换为浮点数
				const sum = parseFloat(item.chinese) + parseFloat(item.math) + parseFloat(item.english)
				// 返回值保留一位小数
				return sum.toFixed(1)
			},
			average(item) {
				const sum = parseFloat(item.chinese) + parseFloat(item.math) + parseFloat(item.english)
				const b = sum / 3
				return b.toFixed(1)
			},
			// 添加操作
			add() {
				// 判断是否为空
				if (this.info.sno == '' || this.info.sno === '') {
					this.show = true;
				} else {
					// 把暂存表信息放到student函数中
					this.student.push(this.info);
					// 添加成功后清空输入框
					this.info = {
						sno: '',
						name: '',
						sex: '女',
						chinese: '',
						math: '',
						english: ''
					};
					// 添加成功后隐藏提示信息
					this.show = false;
				}
			},
			// 删除操作
			del(index) {
				this.student.splice(index, 1);
			},
			// 更新操作
			update(index) {
				this.info = this.student[index];
				// 更新成功后清空输入框
			},
			// 查询操作
			inquire(sno) {
				if (sno === '') {
					// 如果查询框为空，则展示整个数据
					this.student = this.student;
				} else {
					let result = [];
					for (let i = 0; i < this.student.length; i++) {
						if (this.student[i].sno === sno) {
							result.push(this.student[i]);
						}
					}
					this.student = result;
				}
			},
		}
	})
	app.mount("#app");
</script>

</html>